<!--
 * @Author: DUST
 * @Date: 2023-06-09 14:02:57
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-09 14:25:40
 * @FilePath: \vite-project\src\components\browsePageList.vue
 * @Description: 
 * undefined
-->
<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="pagination"
    :data-source="tableData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title" class="cursor" @click="goToDetails(item)">
        <template #actions>
          <span>
            <StarOutlined class="mr8" />
            {{ item.star }}
          </span>
          <span>
            <EyeOutlined class="mr8" />
            {{ item.browseNum }}
          </span>
          <span>
            <CIcon type="icon-editor" class="mr8" />
            {{ item.author }}
          </span>
          <span>
            发布时间：
            {{ timeFormat(item.createTime, "YYYY-MM-DD HH:mm:ss") }}
          </span>
          <span>
            更新时间：
            {{ timeFormat(item.upTime, "YYYY-MM-DD HH:mm:ss") }}
          </span>
          <div class="tagBox">
            <a-tag
              class="tag"
              :color="tagItem.color"
              v-for="tagItem of item.tagList"
              :key="tagItem.id"
            >
              {{ tagItem.name }}
            </a-tag>
          </div>
        </template>
        <a-list-item-meta :description="item.description">
          <template #title>
            <a :href="item.href">{{ item.title }}</a>
          </template>
        </a-list-item-meta>
        <!-- {{ item.content }} -->
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts" setup>
import { StarOutlined, EyeOutlined } from "@ant-design/icons-vue";
import timeFormat from "@/utils/time";

interface PageItem {
  id: number;
  index: number;
}
const emit = defineEmits(["update:pagination"])
const props = defineProps({
  pagination: {
    type: Object,
    default: () => ({})
  },
  tableData: {
    type: Array,
    default: () => []
  },
  goToDetails: {
    type: Function,
    default: (item: PageItem):void => {}
  }
})
</script>

<style lang="less" scoped></style>
